<template>
  <div class="newsList" ref="scroller">
    <div id="chatContainer">
      <div class="content">
        <ul>
          <router-link :to="item.goldSort<=5?{name:'artdetail',
          query:{id:item.id}}:{name:'test',query:{id:item.id}}"
                       tag="li"
                       v-for="(item,index) in newslist"
                       :key="item.id"
          >
            <a href="javascript:;">
              <img v-lazy="item.pic" style="width: 18%;height: 100%">
              <!--<h2>{{index+1}}.{{item.goldTitle}}</h2>-->
              <p>{{item.label}}</p>
            </a>
          </router-link>
        </ul>
        <div v-show="showInit.initBolean" class="loading-more">
          <img class="loading-img" src="../assets/images/loading-list.gif" alt="" v-show="showInit.checkMore">
          <span class="loading-text">{{showInit.initText}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Bscroll from 'better-scroll';
  import API from '../api/api';
  import untils from '../assets/untils/untils'

  export default {
    data() {
      return {
        data: {
          gold: 1,
          currentPage: 1
        },
        newslist: [],
        msg: '222',
        scroller: '',
        // listData: {
        //   'agentCode': '957903427172564992',
        //   'orgId': 'B0311',
        //   'pageNo': 1,
        //   'pageSize': 15
        // },
        listData: {
          gold: 1,
          currentPage: 1
        },
        pageX: 0,
        PageY: 0,
        showInit: {
          initBolean: true,
          checkMore: true,
          initText: '加载更多',
          firstCome: true

        },

      }
    },
    methods: {

      initData: function () {

        let params = {
          // url: '/flow/customer/interviewFlow/findPersonnelbyagentCode',
          url: '/clients/huoban-sales/http/sales/function/product/findGoldProductList.do',
          params: this.listData,
          method: 'GET',
          showLoading: this.showInit.firstCome,
          contentType: 'application/json;',
        };

        API.request(params).then((res) => {
          console.log(res);
          let _this = this;
          if (res.data.list.length < this.listData.currentPage) {
            this.showInit.checkMore = false;
            this.showInit.initText = '没有更多数据了！'
          }
          this.newslist.push.apply(this.newslist, res.data.list);
          // _this.scroller && _this.scroller.refresh() && _this.scroller.finishPullUp();
          this.showInit.firstCome = false;

        })

      },
      initScroll: function () {
        var _this = this;
        this.$nextTick(() => {
          this.scroller = new Bscroll(this.$refs.scroller, {
            scrollX: false,
            scrollY: true,
            probeType: 3,
            click: true
          });

          this.scroller.on('scroll', function (pos) {
            _this.pageX = pos.x;
            _this.pageY = pos.y;

          });

          this.scroller.on('scrollEnd', function () {
            if (_this.scroller.y <= (_this.scroller.maxScrollY + 50) && _this.showInit.checkMore) {
              _this.showInit.initBolean = true;
              // console.log(_this.scroller.y);
              // console.log(_this.scroller.maxScrollY);
              // console.log(11)
              // _this.listData.pageNo++;
              _this.listData.currentPage++;
              _this.initData();
            }
          });

        })
      },
    },
    mounted() {
      this.initScroll();
      this.initData();

    }
  }
</script>
<style>

  .newsList {
    position: relative;
    height: 65%;
    width: 100%;
    margin-bottom: 0 !important;
    overflow: hidden;
  }

  .loading-more {
    display: flex;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
  }

  .loading-img {
    width: 18px;
    /* height: 18px; */
    margin-right: 20px;
  }

  .loading-more .loading-text {
    color: #bfbfbf !important;
  }
</style>
